<template>
  <el-dialog
    :custom-class="'org-tree-dialog'"
    :visible.sync="show"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="'请选择'+ title"
    width="40%"
    append-to-body
    @close="closeDialog"
    @cancel="closeDialog"
    >
    <div class="org-tree-box flex-center">
      <div class="left-box">
        <div class="filter--box">
          <el-input
            placeholder="请输入部门名称"
            v-model="keyword">
          </el-input>
        </div>

        <el-tree
          :data="treeData"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :filter-node-method="filterNode"
          @check="setValue"
          :check-strictly="true"
          :props="orgIds">
        </el-tree>
      </div>
      <div class="right-box">
        <div class="sel-length">已选择：<span style="padding:0 5px">{{values.length || 0}}</span></div>
          <div class="selected-box">
            <div class="sel-item"  v-for="(vitem, key) in values"  :key="key">
              {{vitem.deptName}}
              <span class="el-icon-close icon-close" @click="delItem(vitem)"></span>
            </div>
          </div>
      </div>
    </div>
    <div class="bottom-box flex-center">
      <el-button class="btn" @click="closeDialog" >取 消</el-button>
      <el-button class="btn" type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
    export default {
        name: "index",
        props: {
          show:{
            type: Boolean,
            default: false,
          },
          title:{
            type: String,
            default: '组织结构',
          },
          orgType: {
            type: String,
            default: '',
          },
          orgData: {
            type: Array,
            default: () => []
          },
          orgIds:{
            type: Array,
            default: () => []
          },
          nowUnitId:{
            type: Number,
            default: null,
          }
        },
        watch: {
          keyword(val) {
            this.$refs.tree.filter(val);
          }
        },
        data(){
          return{
            keyword: '', //按部门名称模糊查询
            treeData:[],
            values:[],
          }
        },
        methods:{
          filterNode(value, data){
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
          },
          closeDialog(){
            this.$emit('close')
          },
          save(){
            if((this.orgType == '1' || this.orgType == '2' || this.orgType == '3' )&& this.values.length >1){
              this.$message({
                showClose: true,
                message: `不能选择多个${this.title}！`
              });
              return
            }
            console.log(this.values)
            this.$emit('save',this.values)
          },
          // 选择节点
          setValue(data){
            let curCheckedValues = this.$refs.tree.getCheckedNodes();
            this.values = curCheckedValues
          },
          // 删除节点
          delItem(data){
            let f_index = this.values.findIndex(item=>item.id == data.id)
            this.values.splice(f_index, 1)
            let ids = this.values.map(item=>item.id)
            this.$refs.tree.setCheckedKeys(ids);
          },
          initData(data,parentIds,deptName){
            if(data.length) {
              data.forEach(item=>{
                item.parentIds  =  parentIds
                if(deptName && deptName!='昌泰集团'){
                  item.deptName = `${deptName}/${item.label}`
                }else{
                  item.deptName = `${item.label}`
                }
                if(item.children){
                  this.initData(item.children,`${parentIds},${item.id}`, `${item.deptName}`)
                }
              })
            }
          },
        },
        created() {
          this.treeData = this.orgData
          this.initData(this.treeData,0,null)
          // console.log(this.treeData)
          if(this.orgIds && this.orgIds.length){
            this.$nextTick(()=>{
              this.$refs.tree.setCheckedKeys(this.orgIds);
              this.values =   this.$refs.tree.getCheckedNodes()
            })
          }
        },

    }
</script>

<style scoped lang="scss">
  @import '../../assets/styles/org-tree.scss';
</style>
